<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作者简介页面</title>
		<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
		<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
		<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
			<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
			 
			<link href="css/index.css" rel="stylesheet" type="text/css"/>
			<link href="css/novel.css" rel="stylesheet" type="text/css"/>
		<link href="css/selectauthor.css" rel="stylesheet" type="text/css"/>


	</head>
	<body>
		
		
		<div id="app">
			<div class="td-header" :class="{ 'is-sticky': isSticky }">
				
				<div class="td-header-content">
					<div class="td-header-logo">
						<img src="image/logo.png" />
						<li> 土豆小说网 </li>
					</div>
					<div class="td-header-right">
						<div class="right-shouye">
							<a href="index.html">首页</a>
							 
						</div>
						<div class="right-shouye">
							<a href="bookstore.html">书库</a>
							 
						</div>
						<div class="right-shouye">
							<a href="bookshelf.html">书架</a>
							 
						</div>
						<div class="right-shouye">
							<a href="ranking.html">排行榜</a>
							 
						</div>
						<div class="right-search">
							<input placeholder="请输入书名或作者名" v-model="selectneirou">
							<img @click="select()" style="cursor: pointer;width: 15px;height: 18px;" src="https://ziyilin.oss-cn-shanghai.aliyuncs.com/%E6%90%9C%E7%B4%A21.png" />

						</div>
						<div class="serial-divider  byte-divider byte-divider-vertical" style="margin-right: 40px;"></div>
						<div class="right-user">
							<a  v-if="!isLogged" href="login.html"> <div class="user-login">登录</div></a>
							<a v-if="!isLogged" href="login.html"><div class="user-reg">注册</div></a>
							<div v-if="isLogged" style="display: flex; align-items: center;cursor: pointer;"  >
								<el-avatar   icon="el-icon-user-solid" :src="this.user.avatar"> </el-avatar>
								<span @click="geren()"  style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px; ">{{this.user.username}} </span>
							</div>
							<div v-if="isLogged" style="display: flex; align-items: center;">
								<span    class="user-logout" @click="logout()" style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px;cursor: pointer; ">退出 </span>
							</div>

						</div>
						 
		 
						 
					</div>
				</div>
			</div>
			
			<div class="td-novel">
				<div class="td-novel-page">
					<div class="novel-page-zhong">
						<div>
							<el-breadcrumb separator="/"   >
								<el-breadcrumb-item ><a href="index.html">首页</a> </el-breadcrumb-item>
								<el-breadcrumb-item > <a href="#">作者笔名</a> </el-breadcrumb-item>

							</el-breadcrumb>
						</div>
						<div class="author-message">
							<div class="left">

								<div class="text">
									<div class="first">
										<h1 class="title font-DNMrHsV173Pd4pgy">{{author.authorName}}</h1>
										<div class="mark">土豆签约作家</div>
									</div>
									<div class="desc font-DNMrHsV173Pd4pgy">{{author.motto}}</div>
								</div>
							</div>
							<div class="middle"></div>
							<div class="right">
								<div class="first">
									<div>作品总字数</div>
									<div class="bottom">
										<span class="big font-DNMrHsV173Pd4pgy">{{number}}</span>
										<span class="unit">字</span>
									</div>
								</div>
								<div class="second">
									<div>粉丝数</div>
									<div class="bottom">
										<span class="big font-DNMrHsV173Pd4pgy"></span>
										<span class="unit">人</span>
									</div>
								</div>
								<div class="third">
									<div>创作天数</div>
									<div class="bottom">
										<span class="big font-DNMrHsV173Pd4pgy"></span>
										<span class="unit">天</span>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="page-body-wrap">
					<div class="page-body">
						<div class="page-abstract-header"><h2>全部作品（{{novels.length}}）</h2></div>

						<div  v-for="novel in novels"   @click="Jump(novel.novelId)"  class="book-item" style="margin-top: 50px;">
							<div class="cover">
								<img :src="novel.coverImage" :alt="novel.title">
							</div>
							<div class="content">
								<h2 class="title">
									<a href="/page/7276384138653862966" class="font-DNMrHsV173Pd4pgy">{{novel.title}}</a>
								</h2>
								<div v-if="novel.statu == 1" class="status font-DNMrHsV173Pd4pgy">连载中·   {{novel.categoryName}}</div>
								<div v-if="novel.statu == 0" class="status font-DNMrHsV173Pd4pgy">已完结· {{novel.categoryName}}</div>
								<div class="desc1 font-DNMrHsV173Pd4pgy">{{novel.introduction}}</div>
								<div class="desc2">
									<span class="clickable">
										<a :href="'content.html#'+novel.chapterId">
											最近更新：{{novel.chapterTitle}}<i class="muyeicon-enter clickable"></i>
										</a>
									</span>
									<span class="time">{{novel.publishDate}}</span>
								</div>
							</div>
							<div class="right">
								<div>
									<span class="big font-DNMrHsV173Pd4pgy">{{novel.wordCount}}</span>
									<span class="text1">万字</span>
								</div>
								<div class="btn">
									<a :href="'novel.html#'+novel.novelId">书籍详情</a>
								</div>
							</div>
						</div>



					</div>

				</div>

			</div>
			
			<div class="td-footer">
				  <p>Company Name</p>
				 <p>Address: 123 Street, City, Country</p>
				 <p>Email: info@example.com</p>
			</div>
		</div>
	</body>
	
	<script>
	
	
	var v = new Vue({
		el : "#app",
		data() {
			  
			 return {
				  isSticky: false,

				 author: {
					 authorId: '',
					 authorName: '',
					 motto: '',
				 },

				 user:{
					 userId: '',
					 username: '',
					 avatar: '',
				 },
				 novels: [],
				 isLogged: false,
				 number: 0,//作者创作总字数
				 selectneirou: '',//搜索框内容
				   
				};
			},
	    mounted() {
			window.addEventListener('scroll', this.handleScroll);
			// 获取 URL 中的参数值（以 # 号分隔）
			let hashValue = window.location.hash;

			// 去掉 # 号，只保留值部分
			 this.author.authorId  = hashValue.substring(1);
			 this.selectAuthor();
			 this.iflogin();
			 this.queryNovelList();






		},
		methods: {
			handleScroll() {
				const scrollHeight = window.scrollY || document.documentElement.scrollTop;
				const threshold = 50;
	
				this.isSticky = scrollHeight > threshold;
			},

            //获取作者信息
			selectAuthor(){
				axios.get('/other/author/selectAuthor?authorId='+this.author.authorId).then(res => {
					this.author = res.data;

				});
			},

			//判断是否登录
			iflogin(){
				axios.get('/user/iflogin').then(res=>{


					if(res.data != ""){
						this.user.userId = res.data
						axios.get('/user/getUser?userId='+this.user.userId).then(res=>{
							this.user = res.data;
						});
						this.isLogged =  true;
					}

				});

			},
			//退出登录
			logout(){
				axios.post('/user/logout').then(res=>{
					this.isLogged = false;
					this.iflogin();
					window.location.href = "index.html";

				});

			},
			//查询作者作品列表
			queryNovelList() {
				axios.get('/other/novel/queryNovelList?authorId=' + this.author.authorId).then(res => {
					this.novels = res.data;
					this.novels.forEach(novel => {
						this.number += novel.wordCount;
					});

				});
			},
			//跳转小数简介页面
			Jump(novelId) {
				window.location.href = "novel.html#" + novelId;
			},
			// 搜索
			select(){
				axios.get('/other/select/select?selectneirou='+this.selectneirou).then(res=>{
					if(res.data == "ok"){
						window.location.href = "select.html"
					}

				});

			},
			geren(){
				window.location.href = "user.html"
			},


		}
		 
		 
		 
	})
	</script>
</html>
